<template>
	<view>
		<view class="cu-modal radius" :class="status==true ? 'show':''" @tap="setStatusTap(false)" style="background-color: rgba(0, 0, 0, 0.6);">
			<view class="cu-dialog" @tap.stop="" style="border-radius: 24rpx; overflow: hidden; background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%); box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15); max-width: 600rpx; margin: 0 auto;">
				<view class="cu-bar justify-end" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30rpx 40rpx; position: relative;">
					<view class="content" style="color: #ffffff; font-size: 36rpx; font-weight: 600; text-align: center; width: 100%;">
						{{title}}
					</view>
					<view class="action" @tap="setStatusTap(false)" style="position: absolute; right: 30rpx; top: 50%; transform: translateY(-50%); z-index: 10;">
						<text class="cuIcon-close text-white" style="font-size: 36rpx; opacity: 0.9;"></text>
					</view>
				</view>
				<view class="padding-xl" style="word-break: break-all; padding: 50rpx 40rpx; text-align: center;">
					<rich-text class="explain-text" :nodes="content" v-if="content" style="color: #333333; font-size: 30rpx; line-height: 1.6;">
					</rich-text>
				</view>
				<view class="cu-bar bg-white" v-if="confirmText" style="padding: 0 40rpx 40rpx 40rpx; background: transparent;">
					<button class="action margin flex-sub text-white" :openType="confirmButtonOpenType" @tap="setStatusTap(false)" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50rpx; padding: 20rpx 0; font-size: 30rpx; font-weight: 500; box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.2); transition: all 0.3s ease;">
						{{confirmText}}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {};
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: ''
			},
			status: {
				type: Boolean,
				default: false,
			},
			confirmText: {
				type: String,
				default: ''
			},
			confirmTextClass: {
				type: String,
				default: ''
			},
			confirmButtonOpenType: {
				type: String,
				default: ''
			},
		},
		methods: {
			setStatusTap(status) {
				this.$emit('update:status', status)
			},
		}
	}
</script>

<style scoped>
	.cu-modal.show {
		animation: fadeIn 0.3s ease-out;
	}
	
	.cu-dialog {
		animation: scaleIn 0.3s ease-out;
	}
	
	button.action:active {
		transform: translateY(2rpx);
		box-shadow: 0 5rpx 15rpx rgba(102, 126, 234, 0.2) !important;
	}
	
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	
	@keyframes scaleIn {
		from {
			transform: scale(0.9);
			opacity: 0;
		}
		to {
			transform: scale(1);
			opacity: 1;
		}
	}
	
	.explain-text p {
		margin: 15rpx 0;
		line-height: 1.8;
	}
	
	.explain-text strong {
		color: #667eea;
		font-weight: 600;
	}
</style>
